// 初始化select下拉框的切换事件
function getRankListTop10() {
    const $select = $('#rankTypeSelect');
    const $content = $('#rankContent');

    // 监听select变化事件
    $select.change(function() {
        const selectedValue = $(this).val();
        if (!selectedValue) {
            $content.html('请选择榜单类型查看内容');
            return;
        }

        getRankListComment(selectedValue)

        // 显示加载中状态
        $content.html('<div style="text-align: center; padding: 50px;">加载中...</div>');

        // 发送AJAX请求获取对应榜单数据
        $.ajax({
            url: "/rankList/getMusicByRankListId/"+$select.val(), // 后端接口：根据类型获取榜单数据
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.length >= 1) {
                    // 渲染榜单内容（示例：渲染为排行榜列表）
                    let html = '<ul style="list-style: none; padding: 0;">';
                    response.forEach((item, index) => {
                        html += `
                            <li style="padding: 8px; border-bottom: 1px dashed #eee;font-family:'STKaiti';font-size: 18px">
                                <span style="display: inline-block; width: 30px; text-align: center; font-weight: bold; color: ${index < 3 ? '#ff4500' : '#666'}">
                                    ${index + 1}
                                </span>
                                <span style="margin-left: 10px;">${item.name}---${item.singer}</span>
                                <span style="float: right; color: #999;">${item.time || '获取错误'}</span>
                            </li>
                        `;
                    });
                    html += '</ul>';
                    $content.html(html);
                } else {
                    $content.html('暂无该榜单数据');
                }
            },
            error: function(xhr) {
                console.error('获取榜单数据失败:', xhr.responseText);
                $content.html('加载失败，请重试');
            }
        });
    });
}

function getRankListComment(){
    let $commentList = $('#commentList');
    let $rankTypeSelect = $('#rankTypeSelect');

    $.ajax({
        url: "/comment/getRankListComment/" + $rankTypeSelect.val(),
        type: "GET",
        dataType: "json",
        success: function (data) {
            if (data.length >= 1){
                let html = '<ul style="list-style: none; padding: 0;">';
                data.forEach(item => {
                    html += `<li style="padding: 8px; border-bottom: 1px dashed #eee;font-family:'STKaiti';font-size: 18px">
                            <span style="background-color: #bdeeff">
                                <span>${item.type==='hot' ? '热点评论' : '最新评论'}</span>
                                <h3>用户：${item.userName}</h3>
                                内容：${item.content.includes('被回复人的内容：') ? item.content.split('被回复人的内容：')[0]: item.content}
                                <br>
                                <span style="background-color: aliceblue;color: darkgray">${item.content.includes('被回复人的内容：') ? item.content.split('被回复人的内容：')[1]: ''}</span>
                                <br>
                                <span style="margin-left: 60%">发布时间：${item.postedTime}</span>
                            </span>
                            <hr>
                        </li>`

                })
                html += '</ul>';
                $commentList.html(html);
            }
        }
    })
}

// 获取数据并绘制南丁格尔图图表
function getRankData() {

    var myChart = null;

    $.ajax({
        url: "/rankList/getData",
        type: "GET",
        dataType: "json",
        success: function (data) {

            var countSize = 0;

            data.forEach(item => {
                countSize += item.size;
            });


            // 构建南丁格尔图数据（单个系列包含所有数据）
            const pieData = data.map(item => ({
                value: item.size,
                name: item.name,
            }));

            // 初始化图表
            if (!myChart) {
                myChart = echarts.init(document.getElementById('container'));
            }else {
                myChart.dispose(); // 关键：销毁旧实例
                myChart = echarts.init(document.getElementById('container'));
            }

            // 配置图表选项
            const option = {
                title: {
                    text: '各个音乐榜单的大小',
                    subtext: '榜单总歌曲数量：'+countSize,
                    link: 'https://kuwo.cn/rankList',
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    left: 'right',
                    top: 'middle',
                    data: data.map(item => item.name),
                    pageButtonItemGap: 10,
                    pageButtonPosition: 'end',
                    pageFormatter: '{current}/{total}',
                    pageIconColor: '#2f4554',
                    textStyle: { color: '#666' }
                },
                polar: {
                    radius: ['40%', '80%'], // 控制图表大小
                    center: ['40%', '50%'],
                },
                angleAxis: {
                    max: (Math.max(...data.map(item => item.size)) * 1.2), // 留出顶部空间
                    splitLine: { show: false }
                },
                radiusAxis: {
                    type: 'category',
                    data: ['歌曲数量'],
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { show: false }
                },
                series: [{
                    type: 'pie',
                    name: '榜单数据',
                    radius: ['50%', '80%'], // 环形图效果
                    center: ['40%', '50%'],
                    roseType: 'radius', // 南丁格尔图关键配置
                    data: pieData,
                    itemStyle: {
                        borderRadius: 5,
                        color: params => {
                            const colorList = ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#e79acf'];
                            return colorList[params.dataIndex % colorList.length];
                        }
                    },
                    label: {
                        show: false,
                        position: 'outside',
                        formatter: '{b}: {c}'
                    },
                    labelLine: {
                        show: false,
                        length: 10,
                        length2: 20
                    }
                }]
            };

            myChart.setOption(option);

        },
        error: function (xhr) {
            console.error('请求失败:', xhr.responseText);
        }
    });
}


// 获取热歌榜数据并绘制柱状图图表
function getHotMusicData() {

    var myChart = null;

    $.ajax({
        url: "/rankList/getHotMusic",
        type: "GET",
        dataType: "json",
        success: function (data) {

            if (!data || data.length === 0) {
                alert("没有数据可显示");
                return;
            }

            // 处理数据
            const songNames = data.map(item => item.name);
            const songCounts = data.map(item => item.count);

            // 初始化图表（只在第一次调用时初始化）
            if (!myChart) {
                myChart = echarts.init(document.getElementById('hotMusic'));

                // 监听窗口大小变化，自动调整图表
                window.addEventListener('resize', function() {
                    if (myChart) {
                        myChart.resize();
                    }
                });
            }else {
                myChart.dispose(); // 关键：销毁旧实例
                myChart = echarts.init(document.getElementById('container'));
            }

            const option = {
                title: {
                    text: '总榜单受欢迎前十歌曲'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    formatter: function(params) {
                        const barParam = params[0];
                        const currentSong = data.find(item => item.name === barParam.name);
                        return `歌曲: ${barParam.name}<br/>` +
                            `出现次数: ${barParam.value}<br/>` +
                            `时长: ${currentSong ? currentSong.time : '未知'}秒`;
                    }
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: ['歌曲出现次数']
                },
                grid: {
                    left: '3%',
                    right: '15%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        name: '出现次数',
                        axisLine: {
                            show: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: songNames, // 使用从后端获取的歌曲名称
                        name: '歌曲名字',
                        inverse: true,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                series: [
                    {
                        name: '歌曲出现次数',
                        type: 'bar',
                        data: songCounts,
                        label: {
                            show: true,
                            position: 'insideRight'
                        }
                    }
                ]
            };

            // 设置图表选项
            myChart.setOption(option);
        },
        error: function (xhr) {
            console.error('请求失败:', xhr.responseText);
            alert('获取数据失败，请检查控制台日志');
        }
    });
}

// 获取所有榜单数据
function getAllRankList() {
    $.ajax({
        url: "/rankList/getRankList",
        type: "GET",
        dataType: "json",
        success: function (data) {
            let $rankTypeSelect = $('#rankTypeSelect');
            data.forEach(item => {
                $rankTypeSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
            });
        },
        error: function (xhr) {
            console.error('请求失败:', xhr.responseText);
        }
    });
}


function getRankList() {
    const main = $('#main');
    main.empty();

    const newDiv1 = $('<div>', {
        id: 'container',
        class: 'pie-style',
        style: 'width: 40%;height: 400px;padding-left: 60%;float: left'
    });

    main.append(newDiv1);

    getRankData(); // 重新获取数据并重绘图表

    // 创建新容器
    const newDiv2 = $('<div>', {
        id: 'hotMusic',
        style: 'width: 50%;height: 400px;'
    });

    main.append(newDiv2);

    getHotMusicData();

    const newDiv3 = $('<div>', {
        id: 'rankListMusicTop10',
        style: 'width: 40%;height: 300px;float: left'
    });

    // 向newDiv3中添加select和内容展示区域
    newDiv3.append(`
        <div style="margin-bottom: 10px;">
            <label for="rankTypeSelect">选择榜单：</label>
            <select id="rankTypeSelect" style="padding: 5px; margin-left: 10px;">
                <option value="">-- 请选择 --</option>
                <!-- 初始默认选项，后续可通过AJAX动态加载 -->
<!--                <option value="new">新歌榜</option>-->
<!--                <option value="hot">热歌榜</option>-->
<!--                <option value="original">原创榜</option>-->
<!--                <option value="global">全球榜</option>-->
            </select>
            <label>榜单Top10and榜单评论</label>
        </div>
        <!-- 内容展示区域（用于显示切换后的榜单数据） -->
        <div id="rankContent" style="height: 250px; overflow-y: auto;">
            请选择榜单类型查看内容
        </div>
    `);

    main.append(newDiv3);

    // 初始化select
    getAllRankList();

    // 初始化select事件（核心：切换时触发AJAX请求）
    getRankListTop10();

    const newDiv4 = $('<div>', {
        id: 'commentList',
        style: 'width: 100%%;height: 300px;overflow: auto;'
    });

    // 向newDiv3中添加select和内容展示区域
    // newDiv4.append(`
    //     <div id="commentList" style="height: 100%;width: 100%; overflow: auto;">
    //
    //     </div>
    // `);

    main.append(newDiv4);


}